<html>
<head>
	<!--MOCHAUI-->
	<script type="text/javascript" src="../../../Demo/scripts/mootools-1.3.0-core-nocompat-yc.js"></script>
	<script type="text/javascript" src="../../../Demo/scripts/mootools-1.3.0-more-yc.js"></script>
	<script type="text/javascript" src="../../Core/core.js"></script>
	<script type="text/javascript" src="../../Core/desktop.js"></script>
	<script type="text/javascript" src="../column/column.js"></script>
	<script type="text/javascript" src="../panel/panel.js"></script>
	<script type="text/javascript" src="../taskbar/taskbar.js"></script>
	<script type="text/javascript" src="../window/window.js"></script>
	<script type="text/javascript" src="../window/modal.js"></script>
	<!--MOCHAUI-->
	<script type="text/javascript" src="accordion.js"></script>
	<script type="text/javascript">
		new MUI.Accordion({
			container:'page',
			id:'accordion1',
			panels:[
				{text:'Lorem Ipsum',value:'panel0','html':'<h3>Lorem Ipsum Dolor Sit Amet</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consequat dignissim pede. Aliquam erat volutpat. In ac nulla. Phasellus sapien.</p>'},
				{text:'Dolor Sit','html':'<h3>Lorem Ipsum Dolor Sit Amet</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consequat dignissim pede. Aliquam erat volutpat. In ac nulla. Phasellus sapien.</p>'},
				{text:'Amet','html':'<h3>Lorem Ipsum Dolor Sit Amet</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consequat dignissim pede. Aliquam erat volutpat. In ac nulla. Phasellus sapien.</p>'}
			]
		});
		new MUI.Accordion({
			id:'accordion2',
			onPanelSelected: function(tab, value, self, e) {
				alert('receieved onPanelSelected command on panel ' + value);
			}
		});
	</script>
	<link rel="stylesheet" type="text/css" href="../../Themes/default/css/accordion.css"/>

</head>

<body>

<div id="page">
	<div>load from json</div>
</div>
<br/><br/>

<div id="page2">
	<div>load from html</div>

	<div class="accordion" id="accordion2">
		<div>
			<h3 class="toggler first">Lorem Ipsum</h3>

			<div class="element">
				<div class="content">
					<h3>Lorem Ipsum Dolor Sit Amet</h3>

					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consequat dignissim pede.
						Aliquam erat volutpat. In ac nulla. Phasellus sapien.</p>
				</div>
			</div>

			<h3 class="toggler">Dolor Sit</h3>

			<div class="element">
				<div class="content">
					<h3>Lorem Ipsum Dolor Sit Amet</h3>

					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consequat dignissim pede.
						Aliquam erat volutpat. In ac nulla. Phasellus sapien.</p>
				</div>
			</div>

			<h3 class="toggler last">Amet</h3>

			<div class="element">
				<div class="content">
					<h3>Lorem Ipsum Dolor Sit Amet</h3>

					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consequat dignissim pede.
						Aliquam erat volutpat. In ac nulla. Phasellus sapien.</p>
				</div>
			</div>
		</div>
	</div>
</div>

</body>
</html>